<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-10-31 10:43:44
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-01-30 11:34:37
 * @FilePath: \vue-admin-template\src\views\projectManagement\reviewSheet\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="distribution ">
        <el-dialog title="" :visible.sync="secondDialog" width="800px" :before-close="handleClose">
            <div style="padding: 0px 20px;">
                <div style="text-align: center;">
                    <span style="font-size: 20px;color: #3F3F3F;">{{ '类别维护' }}</span>
                </div>
                <section style="margin-top: 30px;">
                    <el-form ref="form" :model="form" :inline="true">
                        <el-form-item label="类别名称">
                            <el-input v-model="inputValue" style="width: 270px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" class="noraml-btn" @click="addItem">新增</el-button>
                        </el-form-item>
                    </el-form>
                </section>
                <section class="spareParts-info">
                    <el-table v-loading="loading" ref="tableMain" :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="tableData" style="width: 100%" height="300"
                        max-height="400">
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column prop="name" label="类别名称">
                            <template slot-scope="scope">
                                <el-input style="text-align: center;" v-if="scope.row.isEdit" v-model="scope.row.name"
                                    clearable></el-input>
                                <span v-else>{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="180">
                            <template slot-scope="scope">
                                <img @click="clickEdit(scope.row)" src="@/assets/icon/列表icon-修改.png"
                                    style="margin-right: 10px;cursor: pointer;" alt="">
                                <img @click="clickDelete(scope.row.id)" src="@/assets/icon/列表icon-删除.png"
                                    style="margin-right: 10px;cursor: pointer;" alt="">
                            </template>
                        </el-table-column>
                    </el-table>
                </section>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="noraml-btn" @click="handleClose">取 消</el-button>
                <el-button class="noraml-btn" type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { Row } from 'element-ui';


export default {
    props: {
        secondDialog: {
            type: Boolean
        },
        id: {
            type: [String, Number]
        },
    },

    data() {

        return {
            loading: false,
            inputValue: '',
            editIndex: null,
            form: {
                id: '',
                reason: '',
                name: '',
                list: [
                    {
                        name: ''
                    }
                ]
            },
            tableData: [],
            needFresh:false,
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        handleClose(done) {
            this.$emit('closeSelectDetail',this.needFresh)
        },
        addItem() {
            if (!this.inputValue) {
                this.$message.warning('请输入内容');
                return;
            };
            this.$baseRequest('/sys/dict/create', [{ name: this.inputValue, parentId: 4 }], {}, 'post').then(res => {
                this.$message.success('新增成功');
                this.getList();
                this.needFresh = true;
            })
        },
        save() {
            for (let index = 0; index < this.tableData.length; index++) {
                 if(!this.tableData[index].name) {
                    this.$message.warning(`序号${index + 1}的内容不可为空`);
                    return;
                 } 
            };
            this.tableData.forEach(item => {
              delete item.isEdit;
            })
            this.$baseRequest('/sys/dict/revise',this.tableData,{},'put').then(res => {
                this.$message.success('修改成功');
                this.needFresh = true;
                this.getList();
            })
        },
        clickEdit(row) {
            row.isEdit = !row.isEdit;
        },
        getList() {
            this.inputValue = '';
            this.loading = true;
            this.$baseRequestGet('/sys/dict/getList/4', {}, 'get').then(res => {
                this.tableData = res.data;
                this.tableData.forEach(item => {
                    this.$set(item, 'isEdit', false);
                });
                this.loading = false;

            }).catch(res => {
                this.loading = false;
            })
        },
        clickDelete(id) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$baseRequest('/sys/dict/delete/' + id, {}, {}, 'delete').then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList();
                    this.needFresh = true;
                })

            })
        }

    }
}
</script>
<style>
.distribution .el-dialog__body {
    padding-top: 15px;
}

.spareParts-info .el-input--suffix .el-input__inner {
    text-align: center;
}
</style>
<style lang="scss" scoped></style>
  